<template>
    <div style="height:100%;width:100%;overflow: hidden">
        <div id="map"></div>
        <div class="map-overlay top" ref="chanlay" style="display:none">
          <div class="map-overlay-inner">
            <fieldset>
            <label>Select layer</label>
            <select id="layer" name="layer">
            <option value="point" >point</option>
            <option value="line" >line</option>
            <option value="araea" >polygon</option>
            </select>
            </fieldset>
            <fieldset>
            <label>Choose a color</label>
            <div id="swatches"></div>
            </fieldset>
          </div>
        </div>
    </div>
</template>
<script>
import point from '../../public/data/poines'
import line from '../../public/data/lines'
import areas from '../../public/data/area'
export default {
    data () {
        return {
        map:null
        }
    },
    mounted(){
      this.init();
      var hh=this.$refs.chanlay;
      setTimeout(() => {
          hh.style.display='block'
      }, 1000);
    },
    methods:{
       init(){
            this.smartmapx.mapbase = 'http://www.smartmapx.com';
            this.smartmapx.apikey = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYmYiOjE1MzcxODM1OTgsImRhdGEiOiJ7XCJsb2dpbl9uYW1lXCI6XCJyb290XCIsXCJnZW5kZXJcIjoyLFwidXNlcl9pZFwiOlwiZm1fc3lzdGVtX3VzZXJfcm9vdFwiLFwidXNlcl9uYW1lXCI6XCJyb290XCIsXCJ1c2VyX29yaWdpbl9pZFwiOlwiZm1fbG9jYWxcIixcInByb2R1Y3RfaWRcIjpcIlwiLFwiZXhwaXJlX3RpbWVcIjpcIlwiLFwic291cmNlX2lkXCI6XCJcIixcInR5cGVcIjpcIlwiLFwiY29ycF9pZFwiOlwiZm1fc3lzdGVtX2NvcnBcIn0iLCJleHAiOjQwOTI1OTkzNDksImp0aSI6ImFfNjhmZjBhZGY5OTcxNDQ0NThjNzViZWFiN2FjNTkzYWYifQ.W122WkT6QR4HZWbpalkpmirV9JWkDYcCkmNZoxCB_z8';
            this.map=new this.smartmapx.Map({
                container: 'map',
                mapId: 'map_id_1',
                center: [116.39738, 39.90579],
                zoom: 9
            });
            this.map.addControl(new this.smartmapx.NavigationControl(),'top-right');
            this.map.addControl(new this.smartmapx.ScaleControl({
                maxWidth: 100,
                unit: 'm'
            }));
            this.map.on('load',()=>{
                this.map.addSource('point',{
                type:'geojson',
                data:point
                });
                this.map.addLayer({
                    "id": "runpoint",
                    "source": "point",
                    "type": "circle",
                   "layout": {
                    "visibility": "visible"
                    },
                    "paint": {
                    "circle-color": {
                         "stops": [
                            [6,'#228B22'],
                            [7,'#FF1493'],
                            [8,'#1E90FF'],
                            [9,'#7CFC00']
                           ],
                    },
                    "circle-opacity": 1,
                    "circle-radius":8,
                    }
                })

                this.map.addSource('line',{
                    type:'geojson',
                    data:line
                })
                this.map.addLayer({
                   "id": "runLine",
                    "type": "line",
                    "source": "line",
                    "paint": {
                        "line-width": 3,
                        "line-opacity": 0.9,
                        "line-color": {
                            "stops": [
                            [6,'#7FFFD4'],
                            [10,'red'],
                            [11,'#D2691E']
                           ],
                        },
                    }
                })
                
                this.map.addSource('areas',{
                    type:'geojson',
                    data:areas
                })
                this.map.addLayer({
                        "id": "runarea",
                        "type": "fill",
                        "source": "areas",
                        "paint": {
                        "fill-color":{ 
                            "stops": [
                            [6,'red'],
                            [10,'blue'],
                            [11,'green']
                           ],
                        },
                        "fill-opacity": 0.75,
                        "fill-antialias": true,
                        
                        },
                        "layout": {
                        "visibility": "visible"
                        },
                        "maxzoom": 24,
                        "minzoom": 0,
                        "filter": [
                        "all"
                        ]
                })
            })
            var swatches = document.getElementById('swatches');
            var layer = document.getElementById('layer');
            var colors = [
                '#088',
                '#a1dab4',
                '#41b6c4',
                '#2c7fb8',
                '#253494',
                '#fed976',
                '#feb24c',
                '#fd8d3c',
                '#f03b20',
                '#bd0026',
                '#8A2BE2',
                '#006400'
            ];
            
            colors.forEach((color) =>{
                var swatch = document.createElement('button');
                swatch.style.backgroundColor = color;
                swatch.addEventListener('click', ()=> {
                    if(layer.value=="point"){
                        this.map.setPaintProperty('runpoint', 'circle-color', color);
                    }else if(layer.value=="line"){
                        this.map.setPaintProperty('runLine', 'line-color', color);
                    }else if(layer.value=="araea"){
                        this.map.setPaintProperty('runarea', 'fill-color', color);
                    }
                });
                swatches.appendChild(swatch);
                // this.init();
            });
       }
    }
}
</script>
<style lang="less" scoped>
#map{
    width: 100%;
    height: 100%;
}

.map-overlay {
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    position: absolute;
    width: 200px;
    top: 90px;
    left: 10px;
    color:white;
    padding: 10px;
}
 
.map-overlay .map-overlay-inner {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 10px;
}
 
.map-overlay-inner fieldset {
    border: none;
    padding: 0;
    margin: 0 0 10px;
}
 
.map-overlay-inner fieldset:last-child {
    margin: 0;
}
 
.map-overlay-inner select {
    width: 100%;
}
 
.map-overlay-inner label {
    display: block;
    font-weight: bold;
    margin: 0 0 5px;
}
 
.map-overlay-inner button {
    display: inline-block;
    width: 36px;
    height: 20px;
    border: none;
    cursor: pointer;
}
 
.map-overlay-inner button:focus {
    outline: none;
}
 
.map-overlay-inner button:hover {
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.1);
}

#swatches /deep/ button{
    padding: 11px;
}

</style>